<template>
  <view class="viewport">
    <fui-nav-bar isOccupy isFixed background="#0052D9" title="设备报修" color="#fff" @leftClick="leftClick" @rightClick="rightClick">
      <fui-icon color="#fff" name="arrowleft"></fui-icon>
      <template v-slot:right>
        <fui-icon color="#fff" name="plus"></fui-icon>
      </template>
    </fui-nav-bar>

    <view class="warp">
      <view class="head">
        <view class="ipt">
          <u--input placeholder="请输入" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
        </view>
        <view class="screen" @click="screen">
          <image class="img" src="/static/images/index/shaixuan.svg" mode=""></image>
          筛选
        </view>
      </view>

      <view class="port">
        <view class="ul" v-for="v of 3" @click="particulars">
          <view class="title">设备报修205245</view>
          <view class="li">
            <span class="left">报修单号</span>
            <span>bx-20224648</span>
          </view>
          <view class="li">
            <span class="left">报修单号</span>
            <span>bx-20224648</span>
          </view>
          <view class="li">
            <span class="left">报修单号</span>
            <span>bx-20224648</span>
          </view>
          <view class="li">
            <span class="left">报修单号</span>
            <span>bx-20224648</span>
          </view>
          <view class="li">
            <span class="left">报修单号</span>
            <span>bx-20224648</span>
          </view>
          <view class="footer">
            <span>2024.03.26 14：36:19</span>
            <view class="audit">待审核</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const leftClick = () => {
  uni.reLaunch({
    url: '/pages/index/index'
  });
};
const rightClick = () => {};
const screen = () => {
  uni.navigateTo({
    url: '/subpkg_index/malfunctionRepair/audit'
  });
};
//去详情页
const particulars = () => {
  uni.navigateTo({
    url: '/subpkg_index/malfunctionRepair/particulars'
  });
};
</script>

<style lang="scss" scoped>
.warp {
  height: 100%;
  background-color: #f6f6f6;
  font-family: Arial, Helvetica, sans-serif;
  padding-bottom: 150rpx;
  .head {
    display: flex;
    align-items: center;
    background-color: #fff;
    height: 120rpx;
    padding: 20rpx;

    .ipt {
      flex: 1;
      margin-left: 25rpx;
      height: 100rpx;
      display: flex;
      align-items: center;
    }

    .screen {
      // width: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }
    }
  }
  .port {
    .ul {
      margin-top: 24rpx;
      background-color: #fff;
      padding: 0 30rpx;

      .title {
        color: #0052d9;
        font-size: 35rpx;
        font-weight: 600;
        height: 80rpx;
        line-height: 80rpx;
      }
      .li {
        color: #ccc;
        height: 50rpx;
        line-height: 50rpx;
        .left {
          color: #000;
          margin-right: 30rpx;
        }
      }
      .footer {
        display: flex;
        height: 80rpx;
        align-items: center;
        justify-content: space-between;
        .audit {
          border-radius: 25rpx;
          border: 1rpx solid #0052d9;
          height: 48rpx;
          width: 120rpx;
          display: flex;
          font-size: 28rpx;
          color: #0052d9;
          align-items: center;
          justify-content: space-around;
        }
      }
    }
  }
}
</style>
